<template>
  <div class="job">
    <div class="job_header">
      <div class="job_header_home">
        <a>
          <span>BOSS直聘</span>
        </a>
      </div>
      <div class="job_header_search">
        <a>
          搜索职位
          <i class="iconfont iconfont-search"></i>
        </a>
      </div>
      <div class="job_header_icon"></div>
    </div>
    <div class="job_detail">
      <div class="job_detail_name">
        <div>前端工程师</div>
        <div>20-40K</div>
      </div>
      <p class="job_detail_address">
        成都<em></em>5-10年<em></em>本科
      </p>
      <div class="job_detail_tag">
        <span>vue.js</span>
        <span>angularjs</span>
        <span>react</span>
      </div>
      <div class="job_detail_time">更新于：2020-03-24</div>
    </div>
    <div class="job_hr">
      <div class="job_hr_avatar">
        <img src="https://img.bosszhipin.com/beijin/mcs/useravatar/20180305/2ccfb4f9808d8cb1785e13effc1c556280758449c7b86d3d7c28bcf69b1efd7e_s.jpg?x-oss-process=image/resize,w_100,limit_0" alt="">
      </div>
      <div class="hr_detail">
        <div class="hr_main">
          <div class="hr_name">
            陈先生<span>感兴趣</span>
          </div>
          <p>
            美团网<em>-</em>研发工程师
          </p>
        </div>
        <div class="btn">
          <span>立即沟通</span>
        </div>
      </div>
    </div>
    <div class="job_dec">
      <h3 class="job_dec_wrap">职位描述</h3>
      <div class="job_dec_main" v-html="jobDetail">
      </div>
    </div>
    <div class="company_dec">
      <h3 class="company_wrap">公司介绍</h3>
      <div class="company_detail">{{companyDec}}</div>
    </div>
    <div class="company_detail">
      <h3 class="company_wrap">工商信息</h3>
      <p class="company_name">北京三快块级有限公司</p>
      <div class="company_table">
        <table>
          <tbody>
            <tr>
              <td><span>法人代表：</span>穆荣均</td>
              <td><span>注册资本：</span>294000万元人民币</td>
            </tr>
            <tr>
              <td><span>成立时间：</span>2007-04-10</td>
              <td><span>经营状态：</span>开业</td>
            </tr>
          </tbody>
        </table>
        <a>展开<i></i></a>
      </div>
      
      <div class="source">数据来源：企查查</div>
    </div>
    <div class="job_address">
      <h3 class="company_wrap">工作地址</h3>
      <div class="location">
        <div class="location_text">成都武侯区成都国际科技节能大厦A座</div>
        <div class="map">
          <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
        </div>
      </div>
    </div>
    <div class="company_info">
      <div class="company_log">
        <img src="https://img.bosszhipin.com/beijin/upload/com/logo/20191015/49894bda07bbeb4c80ba74437260e266cb57c2e88ea1798160f83900009d5ae5.jpg?x-oss-process=image/resize,w_120,limit_0" alt="">
      </div>
      <div class="info">
        <div class="box">
          <div class="name">美团网</div>
          <div class="focus">关注该公司</div>
        </div>
        <p>北京三快科技有限公司</p>
        <p class="gray">
          O2O<em></em>已上市<em></em>10000人以上
        </p>
      </div>
    </div>
    <div class="job_recomend">
      <p>相似职位</p>
      <div class="job_card">
        <div class="icon">
          <img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20170407/e6a14e190f467455f48c850ec835ec290b8e4144bb3cfe0ff348c95cc876b511.jpg?x-oss-process=image/resize,w_120,limit_0" alt="">
        </div>
        <div class="content">
          <div class="name">
            <span>web前端</span>
            <span>20-40K</span>
          </div>
          <p class="box">
            <span>华为技术有限公司<em>-</em>成都</span>
            <span>立即沟通</span>
          </p>
        </div>
      </div>
      <div class="job_card">
        <div class="icon">
          <img src="https://img.bosszhipin.com/beijin/mcs/chatphoto/20170407/e6a14e190f467455f48c850ec835ec290b8e4144bb3cfe0ff348c95cc876b511.jpg?x-oss-process=image/resize,w_120,limit_0" alt="">
        </div>
        <div class="content">
          <div class="name">
            <span>web前端</span>
            <span>20-40K</span>
          </div>
          <p class="box">
            <span>华为技术有限公司<em>-</em>成都</span>
            <span>立即沟通</span>
          </p>
        </div>
      </div>
    </div>
    <div class="links" :class={autoHieght:isTapUp}>
      <dl class="link_item">
        <dt>推荐公司</dt>
        <dd>
          <a href="">瑞思英语</a>
          <a href="">书生移动</a>
          <a href="">天平派</a>
          <a href="">医微讯科技</a>
          <a href="">智慧流</a>
          <a href="">杰客网</a>
          <a href="">润心堂餐饮</a>
          <a href="">她生活</a>
          <a href="">态客科技</a>
          <a href="">节操精选</a>
          <a href="">霸州市瑞卡木业有限公司</a>
          <a href="">邹城市颜世泉日用品服务部</a>
        </dd>
        <div class="tap" @click="isTapUp=!isTapUp">
          <span class="tap-text">展开</span><i :class={active:isTapUp}></i>
        </div>
      </dl>
    </div>
    <div class="footer">
      <a href="">首页</a>&nbsp;>
      <a href="">成都招聘</a>&nbsp;>
      <a href="">成都web前端招聘</a>&nbsp;>
      <a href="">美团网前端工程师招聘</a>&nbsp;
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        jobDetail:`工作职责：<br>指导其他同学进行开发，促进项目顺利完成<br>负责建设餐饮生态的前端系统架构、推进技术规划落地`,
        companyDec:"美团点评作为一家吃、喝、行、游、购、娱一站式的平台，我们要创造的价值不仅是帮大家吃得更好，还要为人们的生活创造更多的价值，帮大家日常生活的方方面面变得更好，帮大家的旅行生活变得更好。",
        isTapUp:false
      }
    },
    watch: {
      isTapUp(){
        const tap=document.querySelector(".tap-text")
        tap.innerText=this.isTapUp?"收起":"展开"
      }
    },
    computed: {
      //this.job=eval()
      job(){
        return eval(this.jobDetail)
      }
    },
    created() {
      //this.job=eval(this.jobDetail)
    },
    methods: {
      handleTap(){
        const tap=document.querySelector(".tap-text")
        console.log(tap);
        
      }
    },
  }
</script>

<style lang="scss" scoped>
@import "../assets/scss/variables";
.job {
  .job_header {
    height: 55px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 16px;
    padding-right: 16px;
    .job_header_home {
      a {
        span {
          font-size: 20px;
          font-weight: bold;
          color: map-get($colors,"primary");
        }
      }
    }

    .job_header_search {
      display: block;
      padding: 2px 37px 2px 17px;
      color: map-get($colors, "gray2");
      border:1px solid map-get($colors, "primary");
      border-radius: 15px;
      font-size: 12px;
      a {
        i {
          color: map-get($colors, "primary");
        }
      }
    }

    .job_header_icon {
      color: map-get($colors, "primary");
    }
  }

  .job_detail {
    height: 130px;
    background-color: map-get($colors,"primary");
    color: #fff;
    padding: 16px;
    .job_detail_name {
      display: flex;
      font-size: 20px;
      justify-content: space-between;
      font-weight: bold;
    }

    .job_detail_address {
      font-size: 12px;
      display: flex;
      align-items: center;
      margin: 5px 0;
      em {
        display: inline-block;
        width: 1px;
        height: 12px;
        border-left: 2px solid #fff;
        margin: 0 10px;
      }
    }

    .job_detail_tag {
      margin-top: 12px;
      font-size: 12px;
      span {
        display: inline-block;
        border: 1px solid #fff;
        border-radius: 10px;
        margin-right: 20px;
        padding: 3px 8px;
      }
    }

    .job_detail_time {
      font-size: 10px;
      margin-top: 7px;
    }
  }

  .job_hr {
    height: 87px;
    display: flex;
    background-color: map-get($colors,"primary1");
    padding: 17px 18px;
    .job_hr_avatar {
      margin-right: 15px;
      img {
        width: 53px;
        height: 53px;
        border-radius: 50%;
      }
    }

    .hr_detail {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .hr_main {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .hr_name {
          font-size: 17px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          span {
            color: map-get($colors, "orange");
            font-size: 12px;
            margin-right: 30px;
          }
        }

        p {
          font-size: 12px;
          color: map-get($colors, "gray1");
          em {
            display: inline-block;
            margin: 0 10px;
          }
        }
      }

      .btn {
        padding: 5px;
        display: flex;
        align-items: center;
        span {
          display: inline-block;
          padding: 5px 20px;
          border-radius: 15px;
          color: #fff;
          background-color: map-get($colors,"primary");
        }
      }
    }
  }

  .job_dec {
    padding: 18px 17px;
    .job_dec_wrap {
      font-size: 15px;
      position: relative;
      padding-bottom: 10px;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 15px;
        height: 2px;
        background-color: map-get($colors,"primary");
      }
    }

    .job_dec_main {
      padding-top: 10px;
      color: map-get($colors, "gray");
    }
  }

  .company_dec {
    padding: 18px 17px;
    .company_wrap {
      font-size: 15px;
      position: relative;
      padding-bottom: 10px;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 15px;
        height: 2px;
        background-color: map-get($colors,"primary");
      }
    }

    .company_detail {
      padding-top: 10px;
      color: map-get($colors, "gray");
    }
  }

  .company_detail {
    padding: 18px 17px;
    color: map-get($colors, "gray");
    .company_wrap {
      font-size: 15px;
      position: relative;
      padding-bottom: 10px;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 15px;
        height: 2px;
        background-color: map-get($colors,"primary");
      }
    }

    .company_name {
      padding: 10px 0;
    }
    .company_table{
      border: 1px solid map-get($colors, "gray2");
      padding-top: 20px;
      table {
        font-size: 12px;
        border-collapse: collapse;
        tbody {
          display: table-row-group;
          vertical-align: middle;
          tr {
            display: table-row;
            vertical-align: inherit;
            td {
              display: table-cell;
              padding: 2px 20px;
              vertical-align: top;
              width: 50%;
              span {
                padding: 0;
              }
            }
          }
        }
      }

      a {
        display: inline-block;
        width: 100%;
        text-align: center;
        margin-top: 20px;
        padding: 8px 0;
        border-top: 1px solid map-get($colors, "gray2");
        color: map-get($colors, "gray1");
        font-size: 12px;
        i{
          display: inline-block;
          width: 8px;
          height: 8px;
          border: 1px solid #ccc;
          border-left: none;
          border-top: none;
          transform: rotate(45deg);
          margin-left: 6px;
          margin-top: -7px;
          vertical-align: middle;
        }
      }
    }
    

    .source {
      font-size: 11px;
      padding: 10px 0;
    }
  }

  .job_address {
    padding: 18px 17px;
    .company_wrap {
      font-size: 15px;
      position: relative;
      padding-bottom: 10px;
      &::after{
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 15px;
        height: 2px;
        background-color: map-get($colors,"primary");
      }
    }

    .location {
      border: 1px solid #ddd;
      box-shadow: 0 0 10px #ccc;
      margin-top: 20px;
      .location_text{
        height: 36px;
        padding: 5px 15px;
        color: map-get($colors,"gray");
      }
      .map {
        height: 100px;
        width: 100%;
      }
    }

  }

  .company_info {
    height: 100px;
    background-color: map-get($colors,"primary1");
    display: flex;
    padding: 17px;
    align-items: center;
    .company_log {
      margin-right: 15px;
      img {
        width: 64px;
        height: 64px;
      }
    }

    .info {
      flex: 1;
      color: map-get($colors, "gray");
      .box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .name {
          font-size: 17px;
        }

        .focus {
          padding: 5px 15px;
          background-color: map-get($colors, "primary");
          color: #fff;
          border-radius: 15px;
        }
      }

      p {
        font-size: 12px;
      }

      .gray {
        font-size: 12px;
        color: map-get($colors, "gray1");
        display: flex;
        align-items: center;
        em {
          display: inline-block;
          width: 1px;
          height: 12px;
          border-left: 1px solid map-get($colors, "gray1");
          margin: 0 10px;
        }
      }
    }
  }

  .job_recomend {
    padding: 17px 18px;
    p {
      font-size: 13px;
      color: map-get($colors, "gray1");
      padding-bottom: 10px;
    }

    .job_card {
      border-top: 1px solid #ccc;
      display: flex;
      align-items: center;
      .icon {
        img {
          width: 47px;
          height: 47px;
        }
      }
      .content{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 10px;
        .name {
          display: flex;
          justify-content: space-between;
          span {
            &:nth-child(2){
              color: map-get($colors, "orange");
              padding-right: 20px;
            }
          }
        }

        .box {
          display: flex;
          justify-content: space-between;
          margin-top: 5px;
          span {
            font-size: 12px;
            color: map-get($colors, "gray");
            em {
              margin: 0 3px;
            }
            &:nth-child(1){
              display: flex;
              align-items: center;
            }
            &:nth-child(2){
              display: block;
              padding: 6px 17px;
              color: map-get($colors, "primary");
              border:1px solid map-get($colors, "primary");
              border-radius: 15px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
  .autoHieght{
    height: auto !important;
  }
  .links {
    margin: 17px;
    height: 50px;
    overflow: hidden;
    .link_item {
      position: relative;
      border-bottom: 1px solid #ccc;
      padding-bottom: 5px;
      dt {
        font-size: 13px;
        color: map-get($colors, "gray");
        margin-bottom: 10px;
      }

      dd {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        a {
          color: map-get($colors, "gray1");
          font-size: 12px;
          margin-right: 15px;
          padding: 5px 0;
        }
      }
      .tap{
        position: absolute;
        color: map-get($colors, "gray1");
        font-size: 13px;
        right: 5px;
        top: 0;
        i{
          display: inline-block;
          width: 8px;
          height: 8px;
          border: 1px solid #ccc;
          border-left: none;
          border-top: none;
          transform: rotate(45deg);
          margin-left: 6px;
          margin-top: -7px;
          vertical-align: middle;
          transition: .5s;
        }
        .active{
          transform: rotate(225deg);
          margin-top: 0;
        }
      }
    }
  }

  .footer {
    margin: 20px;
    color: map-get($colors, "gray1");
    a {
      font-size: 12px;
      color: map-get($colors, "gray1");
      outline: none;
      text-decoration: none;
      background-color: map-get($colors, "white");
    }
  }
}
</style>